<template>
<div>
  <div v-if='isShow1'>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>项目列表</el-breadcrumb-item>
      <el-breadcrumb-item>项目详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button @click="back" icon="el-icon-arrow-left" size="mini" circle></el-button>
    <el-card>
    <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="100px"
      >

        <el-form-item label="项目名称" prop="pro_name">
          <el-input v-model="editForm.pro_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="项目标识" prop="pro_index">
          <el-input v-model="editForm.pro_index" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属产品" prop="pro_system">
          <el-input v-model="editForm.pro_system" disabled></el-input>
        </el-form-item>
        <el-form-item label="项目负责人" prop="pro_leader">
          <el-select v-model="editForm.pro_leader" placeholder="请选择" disabled>
            <el-option
              v-for="item in usersList"
              :key="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目成员" prop="pro_members">
          <el-select v-model="editForm.pro_members" placeholder="请选择" multiple="true" disabled>
            <el-option
              v-for="item in usersList"
              :key="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开始时间" required>
          <el-col :span="11">
            <el-form-item prop="pro_starttime">
              <el-date-picker type="date" placeholder="选择日期" v-model="editForm.pro_starttime" style="width: 100%;" disabled></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="结束时间" required>
          <el-col :span="11">
            <el-form-item prop="pro_endtime">
              <el-date-picker type="date" placeholder="选择日期" v-model="editForm.pro_endtime" style="width: 100%;" disabled></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item label="级别" prop="pro_level">
          <el-radio-group v-model="editForm.pro_level" disabled>
            <el-radio label="特级"></el-radio>
            <el-radio label="一级"></el-radio>
            <el-radio label="二级"></el-radio>
            <el-radio label="三级"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="pro_state">
          <el-radio-group v-model="editForm.pro_state" disabled>
            <el-radio label="未开始"></el-radio>
            <el-radio label="进行中"></el-radio>
            <el-radio label="已关闭"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="项目描述" prop="pro_description">
          <el-input
            type="textarea"
            v-model="editForm.pro_description"
            disabled
          ></el-input>
        </el-form-item>


      </el-form>
    </el-card>
  </div>

  <div v-if='isShow2'>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>项目列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="getProsList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getProsList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true"
            >添加项目</el-button
          >
        </el-col>
      </el-row>
      <!-- 项目列表区域 -->
      <el-table 
        :data="proslist.slice((queryInfo.pagenum-1)*queryInfo.pagesize, queryInfo.pagenum*queryInfo.pagesize)"
        border stripe>
        <!-- ---:data="用于存放请求数据回来的数组" -->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="项目名称" prop="pro_name"></el-table-column>
        <el-table-column label="项目标识" prop="pro_index"></el-table-column>
        <el-table-column label="所属产品" prop="pro_system"></el-table-column>
        <el-table-column label="项目负责人" prop="pro_leader"></el-table-column>
        <el-table-column label="开始时间" prop="pro_starttime"></el-table-column>
        <el-table-column label="结束时间" prop="pro_endtime"></el-table-column>
        <el-table-column label="级别" prop="pro_level"></el-table-column>
        <el-table-column label="状态" prop="pro_state"></el-table-column>
        <el-table-column label="操作" width="190px">
          <template slot-scope="scope">
            <!-- //--- 这里取到当前单元格 -->
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.pro_id)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeProById(scope.row.pro_id)"
            ></el-button>
            <!-- 展示按钮 -->
            <el-button
              type="success"
              icon="el-icon-s-grid"
              size="mini"
              @click="viewProById(scope.row.pro_id)"
            ></el-button>
          </template>
        </el-table-column>

      </el-table>
      <!--  分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="proslist.length"
      ></el-pagination>
      <!-- 添加项目的对话框 -->
      <el-dialog
        title="添加项目"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClosed"
      >
        <!-- 内容主体区域 -->
        <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"
          label-width="100px"
        >
          <el-form-item label="项目名称" prop="pro_name">
            <el-input v-model="addForm.pro_name"></el-input>
          </el-form-item>
          <el-form-item label="项目标识" prop="pro_index">
            <el-input v-model="addForm.pro_index"></el-input>
          </el-form-item>
          <el-form-item label="所属产品" prop="pro_system">
            <el-input v-model="addForm.pro_system"></el-input>
          </el-form-item>
          <el-form-item label="项目负责人" prop="pro_leader">
            <el-select v-model="addForm.pro_leader" placeholder="请选择">
              <el-option
                v-for="item in usersListl"
                :key="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目成员" prop="pro_members">
            <el-select v-model="addForm.pro_members" placeholder="请选择" multiple="true">
              <el-option
                v-for="item in usersListm"
                :key="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开始时间" required>
            <el-col :span="11">
              <el-form-item prop="pro_starttime">
                <el-date-picker type="date" placeholder="选择日期" v-model="addForm.pro_starttime" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="结束时间" required>
            <el-col :span="11">
              <el-form-item prop="pro_endtime">
                <el-date-picker type="date" placeholder="选择日期" v-model="addForm.pro_endtime" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="级别" prop="pro_level">
            <el-radio-group v-model="addForm.pro_level">
              <el-radio label="特级"></el-radio>
              <el-radio label="一级"></el-radio>
              <el-radio label="二级"></el-radio>
              <el-radio label="三级"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态" prop="pro_state">
            <el-radio-group v-model="addForm.pro_state">
              <el-radio label="未开始"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="项目描述" prop="pro_description">
            <el-input
              type="textarea"
              v-model="addForm.pro_description"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addPro">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改用户对话框 -->
      <el-dialog
        title="修改项目信息"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editDialogClosed"
      >
        <!-- 修改用户对话框 -->
        <el-form
          :model="editForm"
          :rules="editFormRules"
          ref="editFormRef"
          label-width="100px"
        >

          <el-form-item label="项目名称" prop="pro_name">
            <el-input v-model="editForm.pro_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="项目标识" prop="pro_index">
            <el-input v-model="editForm.pro_index"></el-input>
          </el-form-item>
          <el-form-item label="所属产品" prop="pro_system">
            <el-input v-model="editForm.pro_system"></el-input>
          </el-form-item>
          <el-form-item label="项目负责人" prop="pro_leader">
            <el-select v-model="editForm.pro_leader" placeholder="请选择">
              <el-option
                v-for="item in usersListl"
                :key="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目成员" prop="pro_members">
            <el-select v-model="editForm.pro_members" placeholder="请选择" multiple="true">
              <el-option
                v-for="item in usersListm"
                :key="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开始时间" required>
            <el-col :span="11">
              <el-form-item prop="pro_starttime">
                <el-date-picker type="date" placeholder="选择日期" v-model="editForm.pro_starttime" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="结束时间" required>
            <el-col :span="11">
              <el-form-item prop="pro_endtime">
                <el-date-picker type="date" placeholder="选择日期" v-model="editForm.pro_endtime" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="级别" prop="pro_level">
            <el-radio-group v-model="editForm.pro_level">
              <el-radio label="特级"></el-radio>
              <el-radio label="一级"></el-radio>
              <el-radio label="二级"></el-radio>
              <el-radio label="三级"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态" prop="pro_state">
            <el-radio-group v-model="editForm.pro_state">
              <el-radio label="未开始"></el-radio>
              <el-radio label="进行中"></el-radio>
              <el-radio label="已关闭"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="项目描述" prop="pro_description">
            <el-input
              type="textarea"
              v-model="editForm.pro_description"
            ></el-input>
          </el-form-item>


        </el-form>
        <!--  -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addProInfo">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      isShow1:false,
      isShow2:true,
      //获取项目列表参数
      queryInfo: {
        query: "",
        pagenum: 1, //当前的页数
        pagesize: 5, //当前每页显示多少条
      },
      proslist: [
        {
          pro_name: "",
          pro_index: "",
          pro_system: "",
          pro_leader: "",
          pro_starttime: "",
          pro_endtime: "",
          pro_level: "",
          pro_state: "",
        },
      ],
      total: 0,
      //控制添加对话框的显示与隐藏
      addDialogVisible: false,
      //控制修改对话框的显示与隐藏
      editDialogVisible: false,
      // 添加项目的表单数据
      addForm: {
        pro_name: "",
        pro_index: "",
        pro_system: "",
        pro_leader: "",
        pro_members: "",
        pro_starttime: "",
        pro_endtime: "",
        pro_level: "",
        pro_state: "",
        pro_description: "",
      },
      // 通过id获取用户数据
      editForm: {},
      // 所有用户信息列表
      usersList: [],
      usersListl: [],
      usersListm: [],
      // 通过id获取项目数据
      editForm: {},

      //添加表单的验证规则对象
      addFormRules: {
        pro_name: [
          { required: true, message: "请输入项目名称", trigger: "blur" }
        ],
        pro_index:[
          { required: true, message: "请输入项目标识", trigger: "blur" }
        ]
      },
      //修改表单的验证规则对象
      editFormRules: {
        pro_name: [
          { required: true, message: "请输入项目名称", trigger: "blur" }
        ],
        pro_index:[
          { required: true, message: "请输入项目标识", trigger: "blur" }
        ]
      },
    };
  },

  created() {
    this.getProsList();
  },
  mounted: function() {
    // this.getProsList()
    // this.get_user()
    // this.get_userl()
    // this.get_userm()
  },
  methods: {
    // 获取项目列表
    async getProsList() {
      const res = await this.$http.post('/api/item_view', {msg:this.queryInfo.query})
      if (res.status !== 200) {
        return this.$message.error("获取项目列表失败！");
      }
      this.proslist = res.data
    },
    get_user(){
      this.$http.get('/api/users_view').then(res=>{
        this.usersList = res.data
      });
    },
    get_userl(){
      this.$http.get('/api/users_viewl').then(res=>{
        this.usersListl = res.data
      });
    },
    get_userm(){
      this.$http.get('/api/users_viewm').then(res=>{
        this.usersListm = res.data
      });
    },
    
    //点击按钮，添加新项目
    addPro() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        //可以发起添加项目的网络请求
        const res = await this.$http.post('/api/item_add', this.addForm)
        if (res.status !== 200) {
          return this.$message.error("添加项目失败！")
        }
        this.getProsList()
        this.$message.success("添加项目成功！")
        // 隐藏添加项目对话框
        this.addDialogVisible = false
      });
    },
    //监听添加项目对话框关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    // 展示编辑项目的对话框
    async showEditDialog(index) {
      console.log(index)
      const res =await this.$http.post('/api/item_edit_open',{pro_id:index})     
      if (res.status !== 200) {
        return this.$message.error("查询项目信息失败！")
      }
      this.editForm = res.data[0]
      this.editDialogVisible = true
    },
    //监听修改项目对话框关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    // 修改项目信息，并提交
    addProInfo() {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        //可以发起修改用户的网络请求
        this.$http.post('/api/item_edit',this.editForm).then(res=>{
          // 重新获取用户列表数据
          this.getProsList()
        });
        // if (res.meta.status !== 200) {
        //   return this.$message.error("更新项目信息失败！")
        // }
        this.$message.success("更新项目信息成功！")
        // 隐藏更新用户信息对话框
        this.editDialogVisible = false
      })
    },
    //根据id删除项目
    removeProById(index) {
      this.$confirm("此操作将永久删除该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.$http.post('/api/item_drop',{pro_id:index}).then(res=>{
            // 重新获取项目列表数据
            this.getProsList()
          });
          // if (res.meta.status !== 200) {
          //   return this.$message.error("删除用户失败！")
          // }
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          })
        })
    },
    // 展示项目详情
    viewProById(index){
      this.isShow1 = true;
      this.isShow2 = false;
      this.$http.post('/api/item_edit_open',{pro_id:index}).then(res=>{
        this.editForm = res.data[0]
      });
      // this.$router.push("/projects/projects_view")
    },
    back(){
      this.isShow1 = false;
      this.isShow2 = true;
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getProsList()
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getProsList()
    },
  },
};
</script>

<style>
</style>